{layout name="../../admin/view/layout/main" /}
{:breadcrumb(['UI 示例:example/layout/index', '下拉插件:example/select/index', '简单下拉'])}

<div class="row">

    <div class="col-lg-12">
      <div class="card">
        <header class="card-header">
          <div class="card-title">select插件 bootstrap-lyear-select</div>
        </header>
        <div class="card-body">
        
          <p>该插件是基于bootstrap的一个简单的select下拉框插件，只支持单个选项(不支持多选项和分组)、搜素。v5模板已经集成了bootstrap-select插件，功能更全面。</p>
        
        <p><strong>简单使用</strong></p>
        <div class="mb-3">
          <select name="example-1" class="exampleSelect">
            <option value=""></option>
            <option value="1">最新的</option>
            <option value="2">未审核</option>
            <option value="3">未通过</option>
            <option value="4">正在审核</option>
            <option value="5">已审核</option>
            <option value="6">已通过</option>
          </select>
        </div>
        <p><strong>默认有禁用值和选中值</strong></p>
        <div class="mb-3">
          <select name="example-2" class="exampleSelect">
            <option value=""></option>
            <option value="1" disabled>最新的</option>
            <option value="2">未审核</option>
            <option value="3">未通过</option>
            <option value="4" selected>正在审核</option>
            <option value="5">已审核</option>
            <option value="6">已通过</option>
          </select>
        </div>
        <p><strong>可搜索的</strong></p>
        <div class="mb-3">
          <select name="example-3" class="exampleSelect" data-search="true">
            <option value=""></option>
            <option value="1">最新的</option>
            <option value="2">未审核</option>
            <option value="3">未通过</option>
            <option value="4">正在审核</option>
            <option value="5">已审核</option>
            <option value="6">已通过</option>
          </select>
        </div>
        <p><strong>设置宽度</strong></p>
        <div class="mb-3">
          <p>200px宽度</p>
          <select name="example-4" class="exampleSelect" data-width="200px">
            <option value=""></option>
            <option value="1">最新的</option>
            <option value="2">未审核</option>
            <option value="3">未通过</option>
            <option value="4">正在审核</option>
            <option value="5">已审核</option>
            <option value="6">已通过</option>
          </select>
        </div>
        <div class="mb-3">
          <p>50%宽度</p>
          <select name="example-5" class="exampleSelect" data-width="50%">
            <option value=""></option>
            <option value="1">最新的</option>
            <option value="2">未审核</option>
            <option value="3">未通过</option>
            <option value="4">正在审核</option>
            <option value="5">已审核</option>
            <option value="6">已通过</option>
          </select>
        </div>
        <p><strong>布局宽度</strong></p>
        <div class="row">
          <div class="col-3">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-6">
                <option>及时雨宋江</option>
                <option>玉麒麟卢俊义</option>
                <option>智多星吴用</option>
              </select>
            </div>
          </div>

          <div class="col-9">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-7">
                <option>入云龙公孙胜</option>
                <option>大刀关胜</option>
                <option>豹子头林冲</option>
              </select>
            </div>
          </div>

          <div class="col-4">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-8">
                <option>霹雳火秦明</option>
                <option>双鞭呼延灼</option>
                <option>小李广花荣</option>
              </select>
            </div>
          </div>

          <div class="col-8">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-9">
                <option>小旋风柴进</option>
                <option>扑天雕李应</option>
                <option>美髯公朱仝</option>
              </select>
            </div>
          </div>

          <div class="col-5">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-10">
                <option>花和尚鲁智深</option>
                <option>行者武松</option>
                <option>双枪将董平</option>
              </select>
            </div>
          </div>

          <div class="col-7">
            <div class="mb-3">
              <select class="form-control exampleSelect" name="example-11">
                <option>没羽箭张清</option>
                <option>青面兽杨志</option>
                <option>急先锋索超</option>
              </select>
            </div>
          </div>
        </div>
        <pre>$('.simpleSelect').each(function() {
  var $this = $(this);
  $this.lyearSelect({
      width: $this.data('width') ? $this.data('width') : '',                          // 宽度width，示例：75px、50%
      placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',   // 空值项提示语，默认：请选择
      search: $this.data('search') ? $this.data('search') : false,                    // 是否允许搜索
  });
});</pre>
        <div class="mb-0">
          <button class="btn btn-default get-btn">获取值</button>
          <pre class="selected-box mt-2"></pre>
        </div>
        
        </div>
      </div>
  </div>

</div>

<script type="text/javascript">
    $(function(){
        $('.exampleSelect').each(function() {
        var $this = $(this);
        $this.lyearSelect({
            width: $this.data('width') ? $this.data('width') : '', // width示例：75px、50%
            placeholder: $this.data('placeholder') ? $this.data('placeholder') : '请选择',
            search: $this.data('search') ? $this.data('search') : false,
        });
    });
    $('.get-btn').click(function() {
        $('.exampleSelect').each(function() {
            $('.selected-box').append('当前选中值：' + $(this).val() + '，select[name="' + $(this).attr('name') + '"]显示：' + $(this).find(':selected').text() + '\n');
        });
    });
    })
    </script>